<template>
  <el-dialog
    :title="title"
    v-model="visible"
    width="50%"
    destroy-on-close
    height="400px"
    @closed="$emit('closed')"
  >
    <el-calendar v-model="date" ref="calendar">
      <template #header="{ date }">
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate(date, 'prev-month')">
            上个月
          </el-button>
          <el-button size="small" @click="selectDate(date, 'today')">今天</el-button>
          <el-button size="small" @click="selectDate(date, 'next-month')">
            下个月
          </el-button>
        </el-button-group>
      </template>
      <template #date-cell="{ data }">
        <div class="dateBox">
          <div class="topInfo">
            <p class="date">{{ data.day.split("-").slice(2).join("") }}</p>
          </div>
          <div class="plan" v-for="(list, key) in scheduleData" :key="key">
            <div v-if="key == data.day" class="list">
                <sc-status-indicator pulse type="success"></sc-status-indicator>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </el-dialog>
</template>
<script>
export default {
  name: "calendarDialog",
  data() {
    return {
      date: new Date(),
      visible: false,
      isSaveing: false,
      title: "", //弹窗标题
      scheduleData: [],
    };
  },
  methods: {
    // 打卡dialog
    open(mode = "add", row) {
      this.title = row.username + "月汇报详情"
      this.visible = true
      let userInfo = this.$TOOL.data.get("USER_INFO")
      let params = {
        adminIds: row.adminId,
        time: row.createTime.slice(0,7),
        type: row.type
      }
      this.getDailyMonthList(params)
      return this;
    },
    //获取日报列表详情
    async getDailyMonthList(params){
        let res = await this.$API.daily.getDailyMonthList.get(params)
        this.scheduleData = res.data
    },
    // 选择日期
    selectDate(date, val) {
      this.$refs.calendar.selectDate(val);
      let dateList = date.split(" ");
      let year = "";
      let month = "";
      let time = "";
      let day = new Date();
      switch (val) {
        case "prev-month":
          year = dateList[0];
          month = +dateList[2] - 1;
          if (month == 0) {
            month = 12;
            year = +year - 1;
          }
          time = `${year}-${month}`;
          //this.getScheduleList(time);
          break;
        case "today":
          year = day.getFullYear();
          month = +day.getMonth() + 1;
          time = `${year}-${month}`;
          //this.getScheduleList(time);
          break;
        case "next-month":
          year = dateList[0];
          month = +dateList[2] + 1;
          if (month == 13) {
            month = 1;
            year = +year + 1;
          }
          time = `${year}-${month}`;
          //this.getScheduleList(time);
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
